<template>
    <el-card class="container">
        <template #header>
           <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="getBlockUser">
                查询
            </el-button>
        </template>
         <div>
            <el-button
                type="primary"
                size="small"
                icon="el-icon-check"
                @click="approve">
                审核
            </el-button>
            <el-popconfirm
                title="确定拒绝吗？"
                @confirm="reject"
            >
                <template #reference>
                    <el-button
                        type="danger"
                        size="small"
                        icon="el-icon-close">
                        拒绝
                    </el-button>
                </template>
            </el-popconfirm>
        </div>
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="blockUserss"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="selectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
            >
            </el-table-column>
            <el-table-column
                prop="requestUserId"
                label="Id"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="userName"
                label="被举报人员"
            >
            </el-table-column>
            <el-table-column
                prop="requestUserName"
                label="举报人员"
            >
            </el-table-column>
            <el-table-column
                prop="memo"
                label="举报内容"
                width="80"
            >
            </el-table-column>
            <el-table-column
                prop="attachment"
                label="举报附件"
                width="80"
            >
            </el-table-column>
            <el-table-column
                prop="corporator"
                label="是否举报成功"
                width="80"
            >
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="pageChange"
        >
        </el-pagination>
    </el-card>
</template>

<script>
import { ref, toRefs, reactive } from 'vue';
import axios from '../utils/http';
import { alert } from '../utils/index';

export default {
    name: 'BlockUsers',
    setup() {
        const multipleTable = ref(null);

        const state = reactive({
            loading: false,
            allblockUserss: [],
            blockUserss: [],
            multipleSelection: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            type: 'add',
            url: '/brand'
        });

        const getBlockUser = () => {
            state.loading = true;
            axios.get('/report/user').then(res => {
                if (!res || !res.reportUserList) {
                    state.loading = false;
                    return;
                }

                state.allblockUserss = res.reportUserList || [];
                state.total = res.length;
                state.loading = false;

                pageChange(0);
            })
        }

        const approve = () => {
           if (!state.multipleSelection || state.multipleSelection.length == 0) {
                alert.error('请至少选择一项');
                return;
            }
            const apis = [];
            for (const id of state.multipleSelection) {
                apis.push(axios.put('/report/user', {
                    id: id,
                    isBlocked: true
                }));
            }

            Promise.all(apis).then(res => {
                alert.success('审核通过');
                getBlockUser();
            })
        }

        const reject = () => {
            if (!state.multipleSelection || state.multipleSelection.length == 0) {
                alert.error('请至少选择一项');
                return;
            }
            const apis = [];
            for (const id of state.multipleSelection) {
                apis.push(axios.put('/report/user', {
                    id: id,
                    isBlocked: false
                }));
            }

            Promise.all(apis).then(res => {
                alert.success('拒绝成功');
                getBlockUser();
            })
        }

        const selectionChange = (val) => {
            state.multipleSelection = (val || []).map(e => e.id);
        }

        const pageChange = (val) => {
            state.currentPage = val;
            state.blockUserss = (state.allblockUserss || []).slice(val * state.pageSize, (val + 1) * state.pageSize);
        }

        return {
            ...toRefs(state),
            approve,
            multipleTable,
            selectionChange,
            reject,
            getBlockUser,
            pageChange
        }
    }
}
</script>

<style scoped>
    .container {
        min-height: 100%;
    }

    .el-card .is-always-shadow {
        min-height: 100% !important;
    }
</style>